{% extends '../common/layout.html' %} {% block content %}
<div class="content content-backgrund">
    <div id="block-header" class="flow-header">
        <div class="number" id="flow-number">
            CR000009
        </div>
        <div class="type" id="flow-type">
            Type:Meeting
        </div>
    </div>
    <div id="block-flow" class="flow-detail">
    </div>
</div>
<style>
    .flow-header {
        text-align: center;
        margin: 80px 0 60px 0;
    }

    .number {
        font-size: 30px;
        font-weight: bold;
    }

    .type {
        font-size: 18px;
    }

    .flow-detail {
        text-align: center;
    }

    .flow-item {
        display: inline-block;
        margin: 0 50px;
        max-width: 20%;
        vertical-align: top;
    }

    .flow-detail-icon img {
        width: 60px;
        height: 60px;
    }

    .flow-detail-icon {
        width: 100%;
        height: 60px;
        margin: 0 auto;
        position: relative;
    }

    .flow-detail-pending:before {
        content: "";
        width: calc((100% - 60px)/2 + 50px);
        height: 2px;
        position: absolute;
        bottom: 50%;
        left: calc((-100% + 60px)/2 - 50px + (100% - 60px)/2);
        background: #cccccc;
    }

    .flow-detail-reject:before {
        content: "";
        width: calc((100% - 60px)/2 + 50px);
        height: 2px;
        position: absolute;
        bottom: 50%;
        left: calc((-100% + 60px)/2 - 50px + (100% - 60px)/2);
        background: #ff9352;
    }

    .flow-detail-approval:before {
        content: "";
        width: calc((100% - 60px)/2 + 50px);
        height: 2px;
        position: absolute;
        bottom: 50%;
        left: calc((-100% + 60px)/2 - 50px + (100% - 60px)/2);
        background: #00a1de;
    }

    .flow-detail-pending:after {
        content: "";
        width: calc((100% - 60px)/2 + 50px);
        height: 2px;
        position: absolute;
        bottom: 50%;
        background: #cccccc;
    }

    .flow-detail-reject:after {
        content: "";
        width: calc((100% - 60px)/2 + 50px);
        height: 2px;
        position: absolute;
        bottom: 50%;
        background: #ff9352;
    }

    .flow-detail-approval:after {
        content: "";
        width: calc((100% - 60px)/2 + 50px);
        height: 2px;
        position: absolute;
        bottom: 50%;
        background: #00a1de;
    }

    .flow-detail-status {
        margin: 20px 0 0 0;
    }

    .flow-detail-status img {
        width: 15px;
        height: 15px;
    }

    .flow-detail-status span {
        margin-left: 5px;
    }

    .flow-detail-common {
        font-weight: bold;
        font-size: 16px;
        margin: 5px 0;
        word-wrap: break-word;
    }

    .flow-detail-date {
        margin: 0;
        color: #333333;
        font-size: 14px;
    }

    .flow-detail-approver {
        margin: 0;
        font-size: 16px;
        font-weight: bold;
    }
</style>
{% endblock %} {% block scripts %}
<script src="/asstes/scripts/e-lanco/approval-flow.js?{{timestamp}}"></script>
{% endblock %}